<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="标题" v-model="listQuery.name">
            </el-input>

            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="onCreate" type="primary" icon="edit">添加</el-button>
            <el-button v-show="this.form.id" class="filter-item" style="margin-left: 10px;" @click="onSavePower" type="danger" icon="check">保存权限</el-button>
        </div>

        <el-row type="flex">
            <el-col :span="6">
                <!-- 列表 -->
                <el-table height="500" :data="list" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row
                    style="width: 100%" @row-click="getRolePower">

                    <el-table-column type="index" width="50">
                    </el-table-column>

                    <el-table-column align="center" label="角色名称">
                        <template scope="scope">
                            <span>{{scope.row.role_name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作" width="150">
                        <template scope="scope">
                            <el-button size="small" type="success" @click="onEdit(scope.row)">编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="onDelete(scope.row,'deleted')">删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-col>
            <el-col :span="4" :offset="2">
                <el-tree v-loading="treeLoading" ref="tree" style="width:300px;height:500px;" :data="powers" show-checkbox node-key="code"
                    :props="defaultProps">
                </el-tree>
            </el-col>
        </el-row>

        <!-- 表单对象 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form ref="appForm" :rules="rules" class="small-space" :model="form" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>

                <el-form-item label="角色名称" prop="role_name">
                    <el-input v-model="form.role_name"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import api from '@/api/role'
    import waves from '@/directive/waves/index.js' // 水波纹指令

    export default {
        name: 'cost',
        directives: {
            waves
        },
        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                treeLoading: false,
                listQuery: {
                    page: 1,
                    limit: 2000,
                    name: '',
                    where: {
                        name: {
                            $like: null
                        }
                    }
                },
                form: {
                    id: null,
                    name: null,
                },
                rules: {
                    role_name: [
                        { required: true, message: '请输入产品名称', trigger: 'blur' },
                        { min: 3, message: '至少输入3个字符', trigger: 'blur' }
                    ],
                },
                dialogTitle: null,
                dialogFormVisible: false,
                //权限
                powers: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        created() {
            this.getList()
            this.getPower()
        },
        methods: {
            async getList() {
                this.listLoading = true
                this.listQuery.where.name.$like = `%${this.listQuery.name}%`
                let response = await api.page(this.listQuery)
                this.listLoading = false
                this.list = response.data.rows
                this.total = response.data.count
            },
            async getPower() {
                let ret = await api.powerList()
                if (ret.success) {
                    this.powers = ret.data
                }
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            onDelete(row) {
                this.$confirm('是否删除该数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let ret = await api.remove(row)
                    if (ret.success) {
                        await this.getList()
                    }
                })
            },
            onCreate() {
                this.dialogTitle = '新增角色'
                this.resetForm()
                this.dialogFormVisible = true
            },
            onEdit(row) {
                this.dialogTitle = '修改角色'
                this.form = row
                this.dialogFormVisible = true
            },
            resetForm() {
                this.form = {
                    id: undefined,
                    name: '',
                    code: '',
                }
            },
            async save() {
                this.$refs.appForm.validate(async (valid) => {
                    if (!valid) {
                        return
                    }
                    let ret = await api.save(this.form)
                    if (ret.success) {
                        this.$notify({
                            title: '成功',
                            message: '保存成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.dialogFormVisible = false
                        await this.getList()
                    }
                });

            },
            async onSavePower() {
                let powers = this.$refs.tree.getCheckedNodes()
                let ret = await api.savePower({
                    id: this.form.id,
                    powers
                })
                if (ret.success) {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    })
                }
            },
            async getRolePower(row) {
                this.treeLoading = true
                this.form = row
                let ret = await api.getRolePower({ id: row.id })
                if (ret.success) {
                    this.$refs.tree.setCheckedNodes(ret.data)
                }
                setTimeout(() => {
                    this.treeLoading = false
                }, 500);

            },
        }
    }

</script>
